<template>
  <div class="clearfix">
    <a-upload
            action=""
            :multiple="multiple"
            :file-list="fileList"
            :accept="accept"
            :remove="onRemove"
            @change="onChange"
            :before-upload="beforeUpload"
            :customRequest="uploadFile"
    >
      <a-button v-if="fileList.length < numberLimit">
        <a-icon type="plus" />
        选择文件
      </a-button>
    </a-upload>
  </div>
</template>
<script>
  import OSS from 'ali-oss';
  export default {
    name: 'FileUploader',
    data () {
      return {
        previewVisible: false,
        previewImage: '',
        ossAccessTokenURL: 'https://api.ccago.dierqudao.com/core/attachment/aliOssSts',
        ossFileURL: 'https://ccago.oss-cn-hangzhou.aliyuncs.com',
      }
    },
    props: {
      fileList: {
        type: Array,
        required: true,
      },
      numberLimit:{
        type: Number|String,
        default:100
      },
      multiple:{
        type: Boolean,
        default:false
      },
      accept:{
        type: String,
        default:'.jpg,.png,.gif,.jpeg,.doc,.pdf,.ppt,.docx,.xls,.xlsx,.pptx,.rar,.zip,.mp3'
      }
    },
    methods: {
      onRemove(file){
        const that = this;
        this.fileList.forEach(function (element, index) {
          if (element.uid == file.uid) {
            that.fileList.splice(index, 1);
          }
        }, this);
      },
      beforeUpload(file){
        console.log('file');
        console.log(file);
      },
      uploadFile(evt){
        console.log('evt');
        console.log(evt);

        var that = this;
        console.log(that.ossFileURL);
        evt.onProgress({percent: 0});
        OSS.urllib.request(this.ossAccessTokenURL, {method: 'GET'}, function (err, response) {
          let result;
          if (err) {
            that.$message.error('上传异常:' + err);
            console && console.error(err);
            evt.onError(100);
            return;
          }
          try {
            result = JSON.parse(response);
          } catch (e) {
            return alert('parse sts response info error: ' + e.message);
          }
          var client = new OSS({
            accessKeyId: result.data.AccessKeyId,
            accessKeySecret: result.data.AccessKeySecret,
            stsToken: result.data.SecurityToken,
            endpoint: result.data.endpoint,
            bucket: result.data.bucket,
            secure: true
          });
          var suffix = evt.file.name.toLowerCase().split('.').splice(-1)[0];
          console.log(that.ossFileURL);
          var myDate = new Date();
          var file_save_name = 'uploader/000/user-xxx/' + evt.file.uid + '.' + suffix;
          console.log(file_save_name);
          client.multipartUpload(file_save_name, evt.file).then(function (result) {
            evt.onSuccess();
            console.log(that.ossFileURL);
            var file = {
              uid: evt.file.uid,
              url: that.ossFileURL + '/' + file_save_name,
              name: evt.file.name,
              save_name: file_save_name
            }
            evt.onProgress({
              percent: 100,
            });
            that.fileList.push(file);
            that.$message.success(evt.file.name + '上传成功');
          }).catch(function (err) {
            evt.onError();
            that.$message.error(evt.file.name + '上传失败');
          });
        });
      },
      onChange(){

      }
    },
  }
</script>
<style>
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>